<template>
  <div>

    <FormPanel ref="formpanel" :list="formList" :isSubmitBtn="false" :labelWidth=100 :cols="3">
    </FormPanel>
    <!-- table -->
    <BaseDialog :visible.sync="jingDus" :title="'进度'" destroyOnClose :containerStyle="{height: 'calc(100% - 80px)', overflow: 'auto', paddingBottom: '80px'}">
      <jingDu  :rowData="canshu"   @close="aaa"></jingDu>
    </BaseDialog>

    <div class="pdi-foot">
      <el-button size="small" type="primary" @click="closeDialog">返回</el-button>
    </div>

  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import jingDu from './jingDu';


export default {
  name: 'detail',
  components: {
    jingDu
  },
  mixins: [dictionary],
  props: {
    formData: {
      type: Object,
      default: () => ({})
    }

  },
  data() {
    return {
      formList: this.createFormList(),

      fetchParams: { xhrAbort: true },
      title: '',
      canshu:'',
      jingDus:false,
    }
  },
  async created() {
    this.formList.forEach(x => {
      console.log("打印详情页面重主页面接受的数据"+this.formData)
      x.initialValue = this.formData[x.fieldName];
      x.disabled = true;
    });

  },

  methods: {
    closeDialog(type) {
      this.$emit('close', { visible: false, data: this.selectedRows, type: 'close' });
    },

    createFormList() {
      return [
        {
          type: 'BREAK_SPACE',
          label: '销售信息',
        },
        {
          type: 'INPUT',
          label: '销售订单编号',
          fieldName: 'soNo',
          initialValue: '',
        },
        {
          type: 'INPUT',
          label: '订单类型',
          fieldName: 'salesTypeName',
          initialValue: '',
        },
        {
          type: 'DATE',
          label: '订单创建日期',
          fieldName: 'sheetCreateDate',
          initialValue: '',
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
        },
        {
          type: 'INPUT',
          label: '客户姓名',
          fieldName: 'customerName',

        },
        {
          type: 'INPUT',
          label: '客户手机号',
          fieldName: 'customerTel',
          initialValue: '',
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          initialValue: '',
          width: '200'
        },


        {
          type: 'INPUT',
          label: '预订单号',
          fieldName: 'preOrderNo',
          initialValue: '',
          width: '200'
        },
        {
          type: 'INPUT',
          label: '使用人姓名',
          fieldName: 'userName',
          initialValue: '',
          width: '200'
        },
        {
          type: 'INPUT',
          label: '使用人手机号',
          fieldName: 'userPhone',
          initialValue: '',
          width: '200'
        },
        {
          type: 'BREAK_SPACE',
          label: '',
          // v-show={ this.formData.tramEquity ===" "  }

          render: props => {
            return (
              <div>
                <h2>  权益信息</h2>
                <el-button v-show={ (this.formData.rightsName === "11KW充电桩" || this.formData.rightsName === "7KW充电桩") && this.formData.useStatus !== 50   } type="primary" size="small" onClick={() => this.downHandler(this.formData)}>
                  查看安装进度
                </el-button>
              </div>
            );
          }
        },
        // {
        //   type: 'BREAK_SPACE',
        //   label: '',
        //   render: props => {
        //             return (
        //                 <div>
        //                   <el-button   type="text" size="medium" onClick={() => this.downHandler()}>
        //                     查看安装进度
        //                   </el-button>
        //                 </div>
        //             );
        //           }
        // },
        {
          type: 'INPUT',
          label: '权益类型',
          fieldName: 'rightsTypeName',
          initialValue: '',
        },
        {
          type: 'INPUT',
          label: '权益名称',
          initialValue: '',
          fieldName: 'rightsName',

        },
        {
          type: 'INPUT',
          label: '权益使用状态',
          initialValue: '',
          fieldName: 'useStatusName',

        },
        {
          type: 'INPUT_NUMBER',
          label: '权益支付金额',
          initialValue: '',
          fieldName: 'payAmount',
          precision:2,
        },
        {
          type: 'DATE',
          label: '权益支付时间',
          fieldName: 'payDate',
          initialValue: '',
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
        },
        {
          type: 'DATE',
          label: '权益退款时间',
          fieldName: 'refundDate',
          initialValue: '',
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
        },
      ];
    },



    changeHandle(val) {
      console.log('输出的参数', val)
      this.fetchParams = Object.assign({}, val);

    },

    downHandler(val){
      console.log('输出的参数', val)
      this.canshu = val;
      this.jingDus = true;
    },
    close() {
      this.jingDus = false;

    },
    // saveAdd(){
    //   this.jingDus = false;
    // },
    aaa(){
      this.jingDus = false;
    }

  }
}
</script>

<style lang="less">
.pdi-foot {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #d9d9d9;
}
.desc-text h2{
  height: 20px;
  font-size: 14px;
  position: relative;
  display: inline-block;
  margin-right: 10px;
  color: #666;
  &:before{
    content: '';
    display: inline-block;
    width: 6px;
    height: 100%;
    background-color: #6F7766;
    margin-left: -100px;
    vertical-align: middle;
  }

}
</style>
